<template>
	<view class="main">
		<text class="title">{{ titleText }}</text>
		<view class="line" :style="{ width: '125rpx' }"></view>
	</view>
</template>

<script setup>
import { nextTick, onMounted, reactive } from 'vue';
const props = defineProps({
	titleText: {
		type: String,
		default: '标题'
	}
});

// let state = reactive({
// 	lineWidth: 0
// });

// onMounted(() => {
// 	// 动态获取高度
// 	nextTick(() => {
// 		let view = uni.createSelectorQuery().select('.title');
// 		view.boundingClientRect((data) => {
// 			const { width } = data;
// 			state.lineWidth = width * 2 + 'rpx';
// 		}).exec();
// 	});
// });
</script>

<style lang="scss" scoped>
.main {
	position: relative;
	padding: 10rpx 0;
	.title {
		font-weight: 700;
		font-size: 30rpx;
		color: #000;
		position: absolute;
		bottom: 10rpx;
	}
	.line {
		height: 20rpx;
		background: linear-gradient(90deg, #f49a5e 0%, #fe4f56 100%);
		border-radius: 8rpx;
	}
}
</style>
